<script setup lang="ts" name="CertificateInfo">
import { ref, defineProps, onMounted, watch } from "vue";
import api from "@/utils/axiosInstance";
import { GoldMedal } from "@element-plus/icons-vue";

// 你的所有图片链接库
const imageLibrary = [
  "https://images.icon-icons.com/300/PNG/256/certificate-icon_31840.png",
  "https://images.icon-icons.com/2596/PNG/512/certificate_icon_155683.png",
  "https://images.icon-icons.com/2601/PNG/512/certificate_icon_155896.png",
  "https://images.icon-icons.com/1804/PNG/512/iconfinder-488-certificate-achievement-degrees-award-4212933_114976.png",
  "https://images.icon-icons.com/2526/PNG/512/certificate_diploma_icon_151765.png",
];

let certificate = ref([]);
const props = defineProps({
  row: Object,
});
// 组件挂载时检查row是否存在，若存在则请求数据
onMounted(() => {
  if (props.row) {
    fetchData();
  }
});

// 监听visible变化，当变为true时请求数据
watch(
  () => props.row,
  async () => {
    await fetchData();
  }
);

const fetchData = async () => {
  try {
    const response = await api.post(
      "/experimental-personnel/query-certificate",
      { people_id: props.row.PeopleId }
    );
    certificate.value = response.data;
    if (certificate.value.length == 0) {
      console.log("11111111111111111");
    }
    console.log(certificate, "certificate");
  } catch (error) {
    console.error("加载数据失败:", error);
  } finally {
  }
};
</script>
<!-- 
<template>
  <div>
    <ul class="user-list">
      <li v-for="(user, index) in certificate" :key="index" class="user-item">
        <el-icon :size="72"><GoldMedal /></el-icon>
        {{ user.Name }}
      </li>
    </ul>
  </div>
</template>

<style scoped></style> -->

<template>
  <!-- <el-descriptions title="Width horizontal list" border>
    <el-descriptions-item
      :rowspan="2"
      :width="140"
      label="Photo"
      align="center"
    >
      <el-image
        style="width: 100px; height: 100px"
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </el-descriptions-item>
    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>
    <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>
    <el-descriptions-item label="Place">Suzhou</el-descriptions-item>
    <el-descriptions-item label="Remarks">
      <el-tag size="small">School</el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item>
  </el-descriptions> -->

  <el-descriptions
    v-for="(value, key) in certificate"
    direction="vertical"
    border
    style="margin-top: 20px"
    :column="3"
  >
    <el-descriptions-item
      :rowspan="2"
      :width="140"
      label="Certificate"
      align="center"
    >
      <el-image style="width: 100px; height: 100px" :src="imageLibrary[key]" />
    </el-descriptions-item>
    <el-descriptions-item label="Name" style="background-color: green">
      {{ value.Name }}</el-descriptions-item
    >
    <el-descriptions-item label="ObtainedTime">{{
      value.ObtainedTime
    }}</el-descriptions-item>
    <el-descriptions-item label="Place">{{
      value.Location
    }}</el-descriptions-item>
    <el-descriptions-item label="Department">
      {{ value.Department }}
    </el-descriptions-item>
    <!-- <el-descriptions-item label="Address">
      No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
    </el-descriptions-item> -->
  </el-descriptions>
</template>
